<template>
	<view class="content column">
		<view class="header justify-between">
			<!-- <uv-avatar :text="username" fontSize="18" randomBgColor></uv-avatar> -->
			<view class="header-a flex row ">
				<uv-avatar icon="star-fill" fontSize="22"></uv-avatar>
				<text>{{username}}</text>
			</view>
			<view style="line-height: 50px;">
				<text @click="$goto('/pages/login/login')">登录 / 注册</text>
			</view>

		</view>
		<view class="suijichoujian" @tap="$goto('/pages/random/random')">随机数字生成器</view>
		<view class="chouqian pt20 justify-between">
			<view class="box" @tap="$goto('/pages/chouren/chouren')">随机点名器</view>
			<view class="box" @tap="$goto('/pages/code/code')">二维码生成器</view>
		</view>
		<view class="chouqian pt20 justify-between">
			<view class="box" @tap="$goto('/pages/zhuanpan/zhuanpan')">任意九宫格</view>
			<view class="box" @tap="$goto('/pages/zhuanpan/setzhuanpan')">随机分组</view>
		</view>
		
	</view>
</template>

<script lang="ts" setup>
	import { computed, onMounted, ref } from 'vue';
	import { useStore } from 'vuex';
	import { store1Key, userKey } from '../../src/store';


	import { onShow } from '@dcloudio/uni-app';

	const value = ref(0);
	const username = ref('');
	const obj = useStore(userKey);

	onShow(() => {
		writeUser();
	})
	const writeUser = () => {
		username.value = obj.state.username;
	}
</script>

<style lang="scss" scoped>
	.header {
		height: 50px;
		&-a{
			>text {
				line-height: 50px;
				margin-left: 20px;
				font-size: 16px;
			}
		}
		
	}

	.suijichoujian {
		border-radius: 5px;
		height: 100px;
		width: 100%;
		background-color: #22ac38;
		text-align: center;
		line-height: 100px;
		font-size: 24px;
		font-weight: 800;
		color: #ffffff;
	}

	.chouqian {
		width: 100%;
	}

	.box {
		border-radius: 5px;
		height: 100px;
		width: 190px;
		line-height: 100px;
		text-align: center;
		background-color: #ffffff;
	}
</style>